<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link>|
      <router-link to="/hostChart">HostChart</router-link>|
      <router-link to="/about">About</router-link>|
      <router-link to="/barChart">BarChart</router-link>|
      <router-link to="/chartTest">ChartTest</router-link>|
      <router-link to="/fabric">Fabric</router-link>|
      <router-link to="/test">Test</router-link>|
      <router-link to="/canvas">Canvas</router-link>|
      <router-link to="/zoomDrag">zoomDrag</router-link>|
      <router-link to="/TreeStructure">TreeStructure</router-link>|
      <router-link to="/js-caozuo-css">js-caozuo-css</router-link>
      <Father />
    </div>
    <router-view />
  </div>
</template>

<script>
import Father from './views/father.vue'
export default {
  components: { Father },
  data () {
    return {};
  },
  created () {
    /**
     * 
     * vuex的 store 中的数据是保存在运行内存中的，当页面刷新时，页面会重新加载 vue 实例，
     * vuex 里面的数据就会被重新赋值，这样就会出现页面刷新vuex中的数据丢失的问题
     * 
      * 方法1：全局监听，页面刷新的时候将 store 里 state 的值存到 sessionStorage 中，
     然后从sessionStorage 中获取，再赋值给 store ，并移除 sessionStorage 中的数据。
     在 app.vue 中添加以下代码

     注意!!! storage 只能存储字符串的数据，对于 JS 中常用的数组或对象不能直接存储。但我们可以通过JSON 
     对象提供的 parse 和 stringify 方法将其他数据类型转化成字符串，再存储到storage中就可以了。
     
     方法2：安装 vuex-persistedstate 插件
        1. npm install vuex-persistedstate -S //安装插件
        2. 在 store/index.js 文件中添加以下代码：
        import persistedState from 'vuex-persistedstate'
        const store = new Vuex.Store({
         state:{},
         getters:{},
         ...
         plugins: [persistedState()] //添加插件
        })
      注意!!! vuex-persistedstate 默认使用 localStorage 来存储数据
        这时候就需要使用 sessionStorage 进行存储，修改 plugins 中的代码
          plugins: [
          persistedState({ storage: window.sessionStorage })]
      */
    window.addEventListener("beforeunload", () => {
      sessionStorage.setItem("list", JSON.stringify(this.$store.state));
    });
    try {
      sessionStorage.getItem("list") &&
        this.$store.replaceState(
          Object.assign(
            {},
            this.$store.state,
            JSON.parse(sessionStorage.getItem("list"))
          )
        );
    } catch (err) {
      console.log(err);
    }
    sessionStorage.removeItem("list");
  },
};
</script>


<style>
#app {
  margin: 0;
  padding: 0;
}

#nav {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin: 20px;
  padding: 0;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: #42b983;
}
</style>
